<template>
  <Back lan="lan" title="医生排班">
    <!-- 顶部按钮 -->
    <template #buttons>
      <el-button type="primary" size="small" plain>导入</el-button>
      <el-button type="primary" size="small" plain>导出</el-button>
    </template>
    <!-- 头部 -->
    <template #head>
      <div class="up">
        <el-radio-group style="margin: 0px 12px 0px 0px" v-model="tabPosition">
          <el-radio-button label="top">上一周</el-radio-button>
          <el-radio-button label="right">本周</el-radio-button>
          <el-radio-button label="bottom">下一周</el-radio-button>
        </el-radio-group>
        <!-- 下拉列表 -->
        <el-select v-model="value" placeholder="请选择科室">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div>
          <input type="text" placeholder="请输入医生/病人姓名" class="search" />
          <button class="searchbtn">搜索</button>
        </div>
      </div>
    </template>
    <!-- 表格 -->
    <template #table_body>
      <div class="table">
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          style="width: 100%"
        >
          <el-table-column
            prop="sicknessName"
            class="docname"
            align="center"
            label="医生姓名"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="ghRoom"
            label="科室"
            align="center"
            width="115"
          >
          </el-table-column>
          <el-table-column label="2021/01/01 星期一" align="center">
            <el-table-column
              prop="province"
              label="上午"
              width="70"
              align="center"
            >
              10/20
            </el-table-column>
            <el-table-column prop="city" label="下午" width="70" align="center">
              休
            </el-table-column>
          </el-table-column>
          <el-table-column label="2021/01/02 星期二" align="center">
            <el-table-column
              prop="province"
              label="上午"
              width="70"
              align="center"
            >
              10/20
            </el-table-column>
            <el-table-column prop="city" label="下午" width="70" align="center">
              休
            </el-table-column>
          </el-table-column>
          <el-table-column label="2021/01/01 星期三" align="center">
            <el-table-column
              prop="province"
              label="上午"
              width="70"
              align="center"
            >
              休
            </el-table-column>
            <el-table-column prop="city" label="下午" width="70" align="center">
              10/20
            </el-table-column>
          </el-table-column>
          <el-table-column label="2021/01/01 星期四" align="center">
            <el-table-column
              prop="province"
              label="上午"
              width="70"
              align="center"
            >
              10/20
            </el-table-column>
            <el-table-column prop="city" label="下午" width="70" align="center">
              休
            </el-table-column>
          </el-table-column>
          <el-table-column label="2021/01/01 星期五" align="center">
            <el-table-column
              prop="province"
              label="上午"
              width="70"
              align="center"
            >
              休
            </el-table-column>
            <el-table-column prop="city" label="下午" width="70" align="center">
              10/20
            </el-table-column>
          </el-table-column>
          <el-table-column label="2021/01/01 星期六" align="center">
            <el-table-column
              prop="province"
              label="上午"
              width="70"
              align="center"
            >
              休
            </el-table-column>
            <el-table-column prop="city" label="下午" width="70" align="center">
              休
            </el-table-column>
          </el-table-column>
          <el-table-column label="2021/01/01 星期日" align="center">
            <el-table-column
              prop="province"
              label="上午"
              width="70"
              align="center"
            >
              休
            </el-table-column>
            <el-table-column prop="city" label="下午" width="70" align="center">
              10/20
            </el-table-column>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="85" align="center">
            <i class="el-icon-s-tools" @click="changeIsShow"></i>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <!-- 分页 -->
    <template #page>
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </template>

    <!-- 遮罩层 -->
    <div class="zzc" v-show="isShow" @click="changeIsShow">
      <div class="alert" v-show="is_show" @click.stop>
        <div class="shang">
          <div class="zuo" v-show="!isChange">
            <p class="zhaoma">
              <span>赵马</span>
              <span>医生排版详情</span>
            </p>
            <p class="time">
              <span>{{ nowDate }}</span>
            </p>
            <p>
              {{ nowWeek }}
            </p>
            <div class="morning">
              <p>上午</p>
              <p>
                <span>接诊时间: </span>
                <span>8:00-12:00</span>
              </p>
              <p>
                <span>号源数: </span>
                <span>20</span>
              </p>
              <p>
                <span>接诊人数: </span>
                <span>10</span>
              </p>
            </div>
            <div class="pic">
              <img
                src="https://cdn3.axureshop.com/demo/1634752/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u5197.svg"
                alt=""
              />
            </div>
            <div class="afternoon">
              <p>下午</p>
              <p>
                <span>接诊时间: </span>
                <span>14:00-18:00</span>
              </p>
              <p>
                <span>号源数: </span>
                <span>35</span>
              </p>
              <p>
                <span>接诊人数: </span>
                <span>15</span>
              </p>
            </div>
          </div>
          <!-- -------点击设置排班后的页面 -->
          <div class="zuo" v-show="isChange">
            <p class="zhaoma">
              <span>赵马</span>
              <span>医生排版详情</span>
            </p>
            <p class="time">
              <span>{{ nowDate }}</span>
            </p>
            <p>
              {{ nowWeek }}
            </p>

            <Sched :defaultValue="false" />
            <div class="pic">
              <img
                src="https://cdn3.axureshop.com/demo/1634752/images/%E5%8C%BB%E7%94%9F%E6%8E%92%E7%8F%AD/u5197.svg"
                alt=""
              />
            </div>

            <Sched
              :defaultValue="false"
              title="下午"
              :startoptions="{
                start: '14:00',
                step: '00:15',
                end: '18:00',
              }"
              :endoptions="{
                start: '14:00',
                step: '00:15',
                end: '18:00',
              }"
            />
          </div>

          <div class="right">
            <div class="top">
              <el-cascader
                :options="options1"
                :value="value1"
                clearable
                @change="handleChange"
              ></el-cascader>
              <div class="btn" v-show="!showBtn">
                <el-button type="primary" @click="changeClass"
                  >设置排版</el-button
                >
                <el-button type="primary" @click="changeIs_Show" plain
                  >关闭预约</el-button
                >
              </div>
              <div class="btnt" v-show="showBtn">
                <el-button type="primary" @click="changeBtn"
                  >保存设置</el-button
                >
              </div>
            </div>
            <div class="date">
              <el-calendar v-model="value2"> </el-calendar>
            </div>
          </div>
        </div>
        <div class="cha" @click="changeIsShow">
          <i class="el-icon-circle-close"></i>
        </div>
      </div>
      <section v-show="!is_show">
        <div>
          <img
            src="https://cdn3.axureshop.com/demo/1634752/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u4079.svg"
            alt=""
          />
        </div>
        <p>关闭预约确认</p>
        <span
          >关闭后该医生所有的排班将失效，用户将无法从小程序进行预约，确定关闭吗？</span
        >
        <div class="but">
          <el-button type="primary" @click="changeIs_Show" plain
            >取消</el-button
          >
          <el-button type="primary" @click="success">确认</el-button>
        </div>
      </section>
    </div>
  </Back>
</template>
<script>
import Vue from "vue";
import { Button, Dropdown, Radio, RadioGroup, RadioButton } from "element-ui";
import Sched from "@/components/Sched/SchedData.vue";
import Back from "@/components/Part/BackColor.vue";
Vue.use(Button);
Vue.use(Dropdown);
Vue.use(RadioGroup);
Vue.use(RadioButton);
import getUserMsgList from "axios";
export default {
  data() {
    return {
      tabPosition: "",
      showBtn: false,
      isChange: false,
      isBan: false,
      isCheck: true,
      isShow: false,
      is_show: false,
      url: "https://mock.apifox.cn/m1/1527701-0-default/api/sickUser",
      options: [
        {
          value: "选项1",
          label: "内科",
        },
        {
          value: "选项2",
          label: "外科",
        },
      ],
      value: "",
      value2: "",
      tableData: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      // 时间----------------------
      timer: null,
      nowWeek: "",
      nowDate: "",
      nowHour: "",
      value1: [],
      options1: [
        {
          value: "2020",
          label: "2020年",
          children: [
            {
              value: "1",
              label: "一月",
            },
            {
              value: "2",
              label: "二月",
            },
            {
              value: "3",
              label: "三月",
            },
            {
              value: "4",
              label: "四月",
            },
            {
              value: "5",
              label: "五月",
            },
            {
              value: "6",
              label: "六月",
            },
            {
              value: "7",
              label: "七月",
            },
            {
              value: "8",
              label: "八月",
            },
            {
              value: "9",
              label: "九月",
            },
            {
              value: "10",
              label: "十月",
            },
            {
              value: "11",
              label: "十一月",
            },
            {
              value: "12",
              label: "十二月",
            },
          ],
        },
        {
          value: "2021",
          label: "2021年",
          children: [
            {
              value: "1",
              label: "一月",
            },
            {
              value: "2",
              label: "二月",
            },
            {
              value: "3",
              label: "三月",
            },
            {
              value: "4",
              label: "四月",
            },
            {
              value: "5",
              label: "五月",
            },
            {
              value: "6",
              label: "六月",
            },
            {
              value: "7",
              label: "七月",
            },
            {
              value: "8",
              label: "八月",
            },
            {
              value: "9",
              label: "九月",
            },
            {
              value: "10",
              label: "十月",
            },
            {
              value: "11",
              label: "十一月",
            },
            {
              value: "12",
              label: "十二月",
            },
          ],
        },
        {
          value: "2022",
          label: "2022年",
          children: [
            {
              value: "1",
              label: "一月",
            },
            {
              value: "2",
              label: "二月",
            },
            {
              value: "3",
              label: "三月",
            },
            {
              value: "4",
              label: "四月",
            },
            {
              value: "5",
              label: "五月",
            },
            {
              value: "6",
              label: "六月",
            },
            {
              value: "7",
              label: "七月",
            },
            {
              value: "8",
              label: "八月",
            },
            {
              value: "9",
              label: "九月",
            },
            {
              value: "10",
              label: "十月",
            },
            {
              value: "11",
              label: "十一月",
            },
            {
              value: "12",
              label: "十二月",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    getUserMsgList({ url: this.url }).then((res) => {
      // console.log(res.data.list);
      this.tableData = res.data.list;
    });
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 500);
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    changeIsShow() {
      this.isShow = !this.isShow;
      this.is_show = !this.is_show;
      
    },
    changeIs_Show() {
      this.is_show = !this.is_show;

    },
    success() {
      this.is_show = !this.is_show;
      this.$message({
        message: "排班设置成功",
        type: "success",
      });
    },
    // --------------时间
    setNowTimes() {
      //获取当前时间
      let myDate = new Date();
      let wk = myDate.getDay();
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let hou = String(
        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
      );
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let week = weeks[wk];
      this.nowDate = yy + "-" + mm + "-" + dd;
      this.nowHour = hou;
      this.nowWeek = week;
    },
    handleChange(value) {
      console.log(value[0] + ":" + value[1]);
      this.value2 = value[0] + ":" + value[1];
    },
    changeClass() {
      //点击左边变成排版时间界面
      this.isChange = !this.isChange;
      this.showBtn = !this.showBtn;
    },
    changeBan() {
      //滑块决定是否禁用排版时间
      this.isBan = !this.isBan;
    },
    changeBtn() {
      this.showBtn = !this.showBtn;
      this.isChange = !this.isChange;
      this.$message({
        message: "排班设置成功",
        type: "success",
      });
      this.isShow = !this.isShow;
      this.is_show = !this.is_show;
    },
  },
  components: {
    Back,
    Sched,
    // Page
  },
};
</script>
<style scoped lang="scss">
.up {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
}
.searchbtn {
  width: 64px;
  height: 32px;
  background-color: rgba(0, 110, 255, 1);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  margin-left: 12px;
}
.search {
  width: 320px;
  height: 40px;
  border: 1px solid #ccc;
  text-indent: 1rem;
  box-sizing: border-box;
  border-radius: 4px;
  padding-left: 10px;
  margin-left: 12px;
}
.zzc {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  z-index: 2;
  left: 0;
  position: fixed;
  section {
    width: 394px;
    height: 280px;
    margin: 260px auto;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 23px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 90px;
    .but {
      margin-top: 18px;
    }
    p {
      font-size: 18px;
      margin: 8px 0;
    }
    span {
      font-size: 14px;
      color: #999;
      text-align: center;
      line-height: 24px;
    }
  }
  .alert {
    width: 940px;
    height: 660px;
    margin: 140px auto;
    position: relative;
    left: 130px;
    .shang {
      width: 100%;
      height: 585px;
      background-color: #fff;
      display: flex;
      .right {
        width: 80%;
        height: 100%;
        /* background-color: chartreuse; */
        padding: 0 18px;
        box-sizing: border-box;
        .top {
          height: 90px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      .zuo {
        width: 20%;
        height: 100%;
        background-color: #ff9138;
        color: #fff;
        box-sizing: border-box;
        padding-left: 18px;
        .pic {
          height: 2px;
          padding-bottom: 20px;
        }
        .zhaoma {
          padding: 18px 0;
        }
        .time {
          font-size: 20px;
          font-weight: bold;
        }
        .hysbtn {
          width: 160px;
          height: 40px;
          border: none;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          box-sizing: border-box;
          text-indent: 2rem;
        }
        .morning {
          padding-top: 20px;

          p:nth-of-type(1) {
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          p {
            padding-bottom: 14px;
            font-size: 14px;
            font-weight: lighter;
          }
        }
        .afternoon {
          padding-top: 20px;
          p:nth-of-type(1) {
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          p {
            padding-bottom: 14px;
            font-size: 14px;
            font-weight: lighter;
          }
        }
      }
    }
    .cha {
      width: 100%;
      height: 75px;
      text-align: center;
      line-height: 125px;
      i {
        font-size: 50px;
        color: #fff;
      }
    }
  }
}
</style>
<style lang="scss">
[lan="lan"] {
  .el-select .el-input__inner {
    padding-right: 0;
  }
  .el-table th.el-table__cell > .cell {
    font-size: 12px;
    color: #999;
    font-weight: lighter;
  }
  .el-icon-s-tools:before {
    font-size: 24px;
    color: #006eff;
  }
  .el-pagination {
    padding-top: 20px;
  }
  .el-calendar-table .el-calendar-day {
    height: 53px;
  }
  .el-switch__core:after {
    background-color: #ff9138;
  }
  .el-date-editor.el-input {
    width: 160px;
    height: 40px;
    margin-bottom: 14px;
  }
}
</style>